<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="js/plugins/jquery-form/jquery.form.js"></script>

    <script>
        var authorId;
        var userId;
        $(function () {
            // 隐藏带有评论id的a标签
            $("#SingleComment").css('display', 'none');

            var user = JSON.parse(sessionStorage.getItem("user"));
            //console.log(user);
            userId = user.id;
            var username = user.nickName;
            var userheadUrl = user.headImgUrl;

            var targetname;
            //页面数据渲染
            var params = getParams();
            var id = params.id;
            console.log(params);
            var great = "";
            if (id) {
                $.get('/travels/' + id, function (data) {
                    authorId = data.author.id;
                    $('.travels').renderValues(data, {
                        setPerson: function (item, value) {
                            var type = '';
                            if (value == 1) {
                                type = "一个人的旅行";
                            } else if (value == 2) {
                                type = "和父母";
                            } else if (value == 3) {
                                type = "和朋友";
                            } else if (value == 4) {
                                type = "和同事";
                            } else if (value == 5) {
                                type = "和爱人";
                            } else if (value == 6) {
                                type = "和其他";
                            }
                            $(item).html(type);
                            great = data.great;
                        }
                    });
                    targetname = data.title;
                });
            }

            // 判断是评论还是回复
            var flag = 1;
            // 评论按钮的点击事件
            $('#commentBtn').click(function () {

                $("#editModal").modal("show");
            })
            var type;
            var target_id = id;
            var content;
            // 回复表要封装的参数
            var replyuser_id;
            var replyuser_name;
            var replyuser_headImgUrl;

            // 定义评论的id
            var commentId;
            type = 2;
            // 确认保存的是回复还是评论
            $(".btn_submit").click(function () {
                if (flag == 2) {
                    // 回复添加
                    // 通过评论id查被回复人的id,昵称,头像
                    content = $("#commentcontent").val();
                    $.get("comment/replyer", {commentId: commentId}, function (data) {

                        commentId = data[0].id;
                        replyuser_id = data[0].user_id;
                        replyuser_name = data[0].username;
                        replyuser_headImgUrl = data[0].headImgUrl;

                        $.post("/comment/" + commentId + "/saveReply", {
                            replyuser_id: replyuser_id,
                            replyuser_name: replyuser_name,
                            reply_headImgUrl: replyuser_headImgUrl,
                            type: type,
                            content: content
                        }, function (data) {
                            if (data.success) {
                                $(document).dialog({
                                    type: 'toast',
                                    infoIcon: '/img/icon/success.png',
                                    infoText: '成功',
                                    autoClose: 2500,
                                });
                                setTimeout(function () {
                                    // 侧边栏登陆的时候,使用父窗口登陆
                                    window.location.reload();
                                }, 1500);
                            } else {
                                $(document).dialog({
                                    autoClose: 2000,
                                    content: data.msg,
                                });
                            }
                        })
                        return;

                    })

                } else {
                    // 评论添加
                    type = 2;
                    content = $("#commentcontent").val();
                    $.post("comment/saveOrUpdate", {
                        type: type,
                        target_id: target_id,
                        targetname: targetname,
                        content: content
                    }, function (data) {
                        if (data.success) {
                            $(document).dialog({
                                type: 'toast',
                                infoIcon: '/img/icon/success.png',
                                infoText: '成功',
                                autoClose: 2500,
                            });
                            setTimeout(function () {
                                // 侧边栏登陆的时候,使用父窗口登陆
                                window.location.reload();
                            }, 1500);
                        } else {
                            $(document).dialog({
                                autoClose: 2000,
                                content: data.msg,
                            });
                        }
                    })
                }
            })

            // 评论的回显
            $.get("comment", {type: type, pageSize: 2, target_id: target_id}, function (data) {
                // 没有评论就隐藏丑的一批的拼接多余字段
                if (data == null) {
                    $(".ccc").detach();
                    return;
                }
                $("#comments").renderValues(data);

                // 回复的回显
                $.get("/comment/replies", {target_id: commentId, pageSize: 2}, function (data) {
                    console.log(data);
                    if (data == null) {
                        $(".rrr").detach();
                        return;
                    }
                    $("#replies").renderValues(data);
                    $("#replysum").html(data.length)
                })

                // 回复点击事件
                $('.reply').click(function () {
                    flag = 2;
                    commentId = $("#SingleComment").html();
                    $("#editModal").modal("show");
                })
            })

            //收藏操作:===========================周文才===========================================
            $('#collectBtn').click(function () {
                //判断是否是用户登录
                if (!user) {
                    window.location.href = "/login.html";
                } else {
                    if ($("#collectBtn").data('status') == 0) {
                        $('#collectBtn').css("color", "red");
                        $("#collectBtn").data('status', 1);
                        $.post("/collects/travels", {userId: user.id, travelId: id, status: 1}, function (data) {
                            if (data.success) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '收藏成功'
                                });
                            }
                        })
                    } else if ($("#collectBtn").data('status') == 1) {
                        $('#collectBtn').css("color", "black");
                        $("#collectBtn").data('status', 0);
                        $.ajax({
                            url: '/collects/travels',
                            type: 'DELETE',
                            data: {userId: user.id, travelId: id, status: 0},
                            dataType: 'json',
                            success: function (data) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '取消收藏成功'
                                });
                            }
                        })
                    }
                }
            })
            //收藏回显操作=============================================================================
            if (user) {
                $.get("/collects/travel", {userId: user.id, travelId: id}, function (data) {
                    $('#collectBtn').css("color", "black");
                    $('#collectBtn').data("status", data.status);
                    if (data.status) {
                        $('#collectBtn').css("color", "red");
                    }
                })
            }
            //end==========================================================================
            // ================游记点赞=========================
            // 用于开发游记点赞
            // 查询数据库当前用户是否已经对当前游记点赞
            $.get('/travels/' + id + '/isLike', function (data) {
                if (data.state == 0) {
                    // 0 不点赞
                    $('#likeBtn').css('color', '');
                } else {
                    // 1 点赞
                    $('#likeBtn').css('color', 'red');
                }
            })
            $('#likeBtn').click(function () {
                // 发送ajax请求判断当前用户是否登录
                $.get('/travels/isLogin', function (data) {
                    if (data.state == 1) {
                        // 进行点赞逻辑开发
                        $.ajax({
                            url: '/travels/like',
                            type: 'post',
                            data: {travelId: id},
                            success: function (data) {
                                if (data.state == 0) {
                                    // 添加点赞样式
                                    $('#likeBtn').css('color', 'red');
                                } else {
                                    $('#likeBtn').css('color', '');
                                }
                            }
                        })
                    } else {
                        // 跳转到登录页面
                        window.parent.location.href = '/login.html';
                    }
                })
            })

            // ========end=========

        });


    </script>
    <!--wym关注功能-->
    <script>
        var $followBtn;
        var isFan;
        /*一:页面初始化*/
        $(function () {
            $followBtn = $("#followBtn");
            //拿到用户id  authorId
            //拿到当前用户id userId
            //是否是粉丝
            isFan = false;
            //判断是否为自己的页面
            if ((authorId == userId) || (!authorId)) return;
            //1:查询关注 信息
            if (userId) {
                $.ajax({
                    url: "/userFollows/" + authorId + "/followInfo",
                    type: "Get",
                    data: {currentUserId: userId},
                    success: function (followInfo) {
                        if (followInfo) {
                            //3修改关注信息
                            updateFollowPart(followInfo);
                        }
                    }
                });
            }
        })

        /**
         * 修改关注信息
         * @param followInfo 关注信息{isFollowed,followNums,fansNums}
         */
        function updateFollowPart(followInfo) {
            //1:渲染关注数和粉丝数
            $(".num").renderValues(followInfo);
            //2:渲染关注按钮
            isFan = followInfo.isFollowed;
            if (isFan) {
                $followBtn.removeClass("btn-success");
                $followBtn.html("已关注");
            } else {
                $followBtn.html("关注");
                $followBtn.addClass("btn-success");
            }
        }

        <!--二\关注功能-->
        $(function () {
            //1:关注点击按钮事件
            $followBtn.click(function () {
                //ajaxType 修改(取消关注)/新增(关注)
                var ajaxType;
                if (isFan) ajaxType = "Put";
                else ajaxType = "Post";
                //4:发送请求
                $.ajax({
                    url: "/userFollows/" + userId,
                    type: ajaxType,
                    data: {masterUserId: authorId},
                    success: function (result) {
                        console.log(result);
                        if (result.success) {
                            console.log(result.data);
                            //5:更新页面关注信息
                            updateFollowPart(JSON.parse(result.data));
                        }
                    }
                });

            });
        })
    </script>

    <style>
        .ccc {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span> 0</span>
            回复 <span id="replysum"> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span>0 </span>篇游记
                    <span>0 </span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends">120</span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-fun="setPerson" render-key="person"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days">1</span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="content.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill star">
            <i class="fa fa-thumbs-o-up" id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" data-status="0" id="collectBtn"> </i>
        </div>
    </div>
</div>

<hr>
<div id="comments" class="ccc">
    <div render-loop="list">
        <div>
            <a render-html="list.id" id="SingleComment" display="none"></a>
            <a data-href="/mine/profiles.html" render-attr="data-id=self.id" class="dynamic-detail">
                <span><img render-src="list.headImgUrl" width="20px"></span>
                <span render-html="list.username"></span> <span>评论了 游记 : <a render-html="list.targetname">
            </a>
                <span render-html="list.create_time"></span></span>
            </a>
            <hr>
            <p render-html="list.content"></p>
            <button type="button" class="reply btn btn-success">回复</button>
            <hr>
        </div>
    </div>
</div>

<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">评论</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/comment/saveOrUpdate.do" method="post" id="editForm">
                    <!--<input type="hidden" value="" name="id">-->
                    <input type="hidden" value="id" name="targetId">
                    <div class="form-group">
                        <div class="col-sm-6 ">
                            <textarea type="text" id="commentcontent" class="form-control" name="content"
                                      style="height: 100px"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn_submit">保存</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>